<!--<template>-->
<!--  <el-container class="customer-container">-->
<!--    <el-header class="header-style">-->
<!--      <div class="header-content">-->
<!--        <h2>客户管理</h2>-->
<!--        <el-button type="primary" @click="openDialog">新增客户</el-button>-->
<!--      </div>-->
<!--    </el-header>-->
<!--    <el-main class="main-style">-->
<!--      <el-table :data="customerData" border style="width: 100%">-->
<!--        <el-table-column prop="id" label="ID"></el-table-column>-->
<!--        <el-table-column prop="name" label="姓名"></el-table-column>-->
<!--        <el-table-column prop="phone" label="电话"></el-table-column>-->
<!--        <el-table-column prop="email" label="邮箱"></el-table-column>-->
<!--        <el-table-column label="操作">-->
<!--          <template #default="scope">-->
<!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="currentPage"-->
<!--          :page-sizes="[5, 10, 15, 20]"-->
<!--          :page-size="pageSize"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--      ></el-pagination>-->
<!--    </el-main>-->
<!--  </el-container>-->

<!--  &lt;!&ndash; 新增/编辑客户对话框 &ndash;&gt;-->
<!--  <el-dialog v-model="dialogVisible" :title="editMode ? '编辑客户' : '新增客户'">-->
<!--    <el-form :model="customerForm">-->
<!--      <el-form-item label="姓名">-->
<!--        <el-input v-model="customerForm.name" placeholder="请输入姓名"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="电话">-->
<!--        <el-input v-model="customerForm.phone" placeholder="请输入电话"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="邮箱">-->
<!--        <el-input v-model="customerForm.email" placeholder="请输入邮箱"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="submitCustomer">确认</el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import { ref } from 'vue';-->
<!--// import router from '@/router';-->

<!--export default {-->
<!--  name: 'CustomerView',-->
<!--  setup() {-->
<!--    const customerData = ref([-->
<!--      { id: 1, name: '张三', phone: '13800138000', email: 'zhangsan@example.com' },-->
<!--      { id: 2, name: '李四', phone: '13800138001', email: 'lisi@example.com' },-->
<!--      { id: 3, name: '王五', phone: '13800138002', email: 'wangwu@example.com' },-->
<!--    ]);-->

<!--    const currentPage = ref(1);-->
<!--    const pageSize = ref(5);-->
<!--    const total = ref(customerData.value.length);-->

<!--    const dialogVisible = ref(false);-->
<!--    const editMode = ref(false);-->
<!--    const currentRow = ref(null);-->
<!--    const customerForm = ref({-->
<!--      name: '',-->
<!--      phone: '',-->
<!--      email: '',-->
<!--    });-->

<!--    const handleEdit = (index, row) => {-->
<!--      editMode.value = true;-->
<!--      currentRow.value = row;-->
<!--      customerForm.value = { ...row };-->
<!--      dialogVisible.value = true;-->
<!--    };-->

<!--    const handleDelete = (index, row) => {-->
<!--      customerData.value = customerData.value.filter(item => item.id !== row.id);-->
<!--      total.value = customerData.value.length;-->
<!--    };-->

<!--    const handleSizeChange = (val) => {-->
<!--      pageSize.value = val;-->
<!--    };-->

<!--    const handleCurrentChange = (val) => {-->
<!--      currentPage.value = val;-->
<!--    };-->

<!--    const openDialog = () => {-->
<!--      editMode.value = false;-->
<!--      currentRow.value = null;-->
<!--      customerForm.value = { name: '', phone: '', email: '' };-->
<!--      dialogVisible.value = true;-->
<!--    };-->

<!--    const submitCustomer = () => {-->
<!--      if (editMode.value) {-->
<!--        const index = customerData.value.findIndex(item => item.id === currentRow.value.id);-->
<!--        if (index !== -1) {-->
<!--          customerData.value[index] = { ...customerForm.value, id: currentRow.value.id };-->
<!--        }-->
<!--      } else {-->
<!--        const newId = customerData.value.length > 0 ? Math.max(...customerData.value.map(item => item.id)) + 1 : 1;-->
<!--        customerData.value.push({ id: newId, ...customerForm.value });-->
<!--        total.value = customerData.value.length;-->
<!--      }-->
<!--      dialogVisible.value = false;-->
<!--    };-->

<!--    return {-->
<!--      customerData,-->
<!--      currentPage,-->
<!--      pageSize,-->
<!--      total,-->
<!--      dialogVisible,-->
<!--      editMode,-->
<!--      currentRow,-->
<!--      customerForm,-->
<!--      handleEdit,-->
<!--      handleDelete,-->
<!--      handleSizeChange,-->
<!--      handleCurrentChange,-->
<!--      openDialog,-->
<!--      submitCustomer,-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.customer-container {-->
<!--  height: 100vh;-->
<!--  display: flex;-->
<!--}-->

<!--.header-style {-->
<!--  background-color: #fff;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  padding: 10px 20px;-->
<!--  position: fixed;-->
<!--  top: 0;-->
<!--  right: 0;-->
<!--  left: 0;-->
<!--  z-index: 99;-->
<!--}-->

<!--.header-content {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.main-style {-->
<!--  margin-top: 60px;-->
<!--  padding: 20px;-->
<!--}-->

<!--.dialog-footer {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--}-->
<!--</style>-->

<!--<template>-->
<!--  <el-container class="customer-container">-->
<!--    <el-header class="header-style">-->
<!--      <div class="header-content">-->
<!--        <h2>客户管理</h2>-->
<!--        <div class="button-group">-->
<!--          <el-button type="primary" @click="openDialog">新增客户</el-button>-->
<!--          <el-button type="success" @click="downloadExcel">下载Excel</el-button>-->
<!--        </div>-->
<!--      </div>-->
<!--    </el-header>-->
<!--    <el-main class="main-style">-->
<!--      <el-table :data="customerData" border style="width: 100%">-->
<!--        <el-table-column prop="customerID" label="ID"></el-table-column>-->
<!--        <el-table-column prop="customerName" label="姓名"></el-table-column>-->
<!--        <el-table-column prop="telephone" label="电话"></el-table-column>-->
<!--        <el-table-column prop="address" label="地址"></el-table-column>-->
<!--        <el-table-column prop="pid" label="身份证号"></el-table-column>-->
<!--        <el-table-column label="操作">-->
<!--          <template #default="scope">-->
<!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-main>-->
<!--  </el-container>-->

<!--  &lt;!&ndash; 新增/编辑客户对话框 &ndash;&gt;-->
<!--  <el-dialog v-model="dialogVisible" :title="editMode ? '编辑客户' : '新增客户'">-->
<!--    <el-form :model="customerForm">-->
<!--      <el-form-item label="姓名">-->
<!--        <el-input v-model="customerForm.customerName" placeholder="请输入姓名"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="电话">-->
<!--        <el-input v-model="customerForm.telephone" placeholder="请输入电话"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="地址">-->
<!--        <el-input v-model="customerForm.address" placeholder="请输入地址"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="身份证号">-->
<!--        <el-input v-model="customerForm.pid" placeholder="请输入身份证号"></el-input>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="submitCustomer">确认</el-button>-->
<!--      </span>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import { ref, onMounted } from 'vue';-->
<!--import axios from 'axios';-->
<!--import * as XLSX from 'xlsx';-->

<!--export default {-->
<!--  name: 'CustomerView',-->
<!--  setup() {-->
<!--    const customerData = ref([]);-->
<!--    const dialogVisible = ref(false);-->
<!--    const editMode = ref(false);-->
<!--    const currentRow = ref(null);-->
<!--    const customerForm = ref({-->
<!--      customerName: '',-->
<!--      telephone: '',-->
<!--      address: '',-->
<!--      pid: '',-->
<!--    });-->

<!--    // 从后端获取客户数据-->
<!--    const fetchCustomers = async () => {-->
<!--      try {-->
<!--        const response = await axios.get('http://localhost:8088/api/customers');-->
<!--        customerData.value = response.data;-->
<!--      } catch (error) {-->
<!--        console.error('获取客户数据失败:', error);-->
<!--      }-->
<!--    };-->

<!--    // 生命周期钩子：组件挂载后获取客户数据-->
<!--    onMounted(() => {-->
<!--      fetchCustomers();-->
<!--    });-->

<!--    const handleEdit = (index, row) => {-->
<!--      editMode.value = true;-->
<!--      currentRow.value = row;-->
<!--      customerForm.value = { ...row };-->
<!--      dialogVisible.value = true;-->
<!--    };-->

<!--    // 删除客户-->
<!--    const handleDelete = (index, row) => {-->
<!--      // 发送删除请求到后端接口-->
<!--      axios.delete(`http://localhost:8088/api/customers/delete/${row.customerID}`)-->
<!--          .then(response => {-->
<!--            console.log('删除客户成功:', response.data);-->
<!--            // 根据后端返回的结果更新客户数据-->
<!--            customerData.value = customerData.value.filter(item => item.customerID !== row.customerID);-->
<!--          })-->
<!--          .catch(error => {-->
<!--            console.error('删除客户失败:', error);-->
<!--          });-->
<!--    };-->

<!--    const openDialog = () => {-->
<!--      editMode.value = false;-->
<!--      currentRow.value = null;-->
<!--      customerForm.value = { customerName: '', telephone: '', address: '', pid: '' };-->
<!--      dialogVisible.value = true;-->
<!--    };-->

<!--    // 提交客户信息-->
<!--    const submitCustomer = () => {-->
<!--      const customerInfo = {-->
<!--        pid: customerForm.value.pid,-->
<!--        address: customerForm.value.address,-->
<!--        customerName: customerForm.value.customerName,-->
<!--        telephone: customerForm.value.telephone-->
<!--      };-->

<!--      if (editMode.value && currentRow.value) {-->
<!--        // 修改客户信息，发送请求到后端接口-->
<!--        axios.put(`http://localhost:8088/api/customers/update/${currentRow.value.customerID}`, customerInfo)-->
<!--            .then(response => {-->
<!--              console.log('修改客户成功:', response.data);-->
<!--              // 根据后端返回的结果更新客户数据-->
<!--              const index = customerData.value.findIndex(item => item.customerID === currentRow.value.customerID);-->
<!--              if (index !== -1) {-->
<!--                customerData.value[index] = { ...customerForm.value, customerID: currentRow.value.customerID };-->
<!--              }-->
<!--            })-->
<!--            .catch(error => {-->
<!--              console.error('修改客户失败:', error);-->
<!--            });-->
<!--      } else {-->
<!--        // 添加新客户的逻辑-->
<!--        axios.post('http://localhost:8088/api/customers/insert', customerInfo)-->
<!--            .then(response => {-->
<!--              console.log('添加客户成功:', response.data);-->
<!--              // 根据后端返回的 ID 更新客户数据-->
<!--              const newId = response.data.insertedId || customerData.value.length > 0 ? Math.max(...customerData.value.map(item => item.customerID)) + 1 : 1;-->
<!--              customerData.value.push({ customerID: newId, ...customerForm.value });-->
<!--            })-->
<!--            .catch(error => {-->
<!--              console.error('添加客户失败:', error);-->
<!--            });-->
<!--      }-->
<!--      dialogVisible.value = false;-->
<!--    };-->

<!--    // 下载Excel-->
<!--    const downloadExcel = () => {-->
<!--      // 创建一个新的工作簿-->
<!--      const workbook = XLSX.utils.book_new();-->
<!--      // 创建一个新的工作表-->
<!--      const worksheet = XLSX.utils.json_to_sheet(customerData.value);-->
<!--      // 将工作表添加到工作簿-->
<!--      XLSX.utils.book_append_sheet(workbook, worksheet, '客户信息');-->
<!--      // 导出Excel文件-->
<!--      XLSX.writeFile(workbook, '客户信息.xlsx');-->
<!--    };-->

<!--    return {-->
<!--      customerData,-->
<!--      dialogVisible,-->
<!--      editMode,-->
<!--      currentRow,-->
<!--      customerForm,-->
<!--      handleEdit,-->
<!--      handleDelete,-->
<!--      openDialog,-->
<!--      submitCustomer,-->
<!--      downloadExcel-->
<!--    };-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.customer-container {-->
<!--  height: 100vh;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.header-style {-->
<!--  background-color: #fff;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);-->
<!--  padding: 10px 20px;-->
<!--  position: sticky;-->
<!--  top: 0;-->
<!--  z-index: 99;-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.header-content {-->
<!--  display: flex;-->
<!--  flex: 1;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--}-->

<!--.main-style {-->
<!--  flex: 1;-->
<!--  padding: 20px;-->
<!--  overflow-y: auto;-->
<!--}-->

<!--.el-table {-->
<!--  height: 100%;-->
<!--}-->

<!--.button-group {-->
<!--  display: flex;-->
<!--  gap: 10px;-->
<!--}-->

<!--.dialog-footer {-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--}-->
<!--</style>-->


<template>
  <el-container class="customer-container">
    <el-header class="header-style">
      <div class="header-content">
        <h2>客户管理</h2>
        <div class="button-group">
          <el-button type="primary" @click="openDialog">新增客户</el-button>
          <el-button type="success" @click="downloadExcel">下载Excel</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="main-style">
      <div class="search-container">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="searchForm.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="searchForm.address" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="searchForm.idCard" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="filteredCustomerData" border style="width: 100%">
        <el-table-column prop="customerID" label="ID"></el-table-column>
        <el-table-column prop="customerName" label="姓名"></el-table-column>
        <el-table-column prop="telephone" label="电话"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="pid" label="身份证号"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>

  <!-- 新增/编辑客户对话框 -->
  <el-dialog v-model="dialogVisible" :title="editMode ? '编辑客户' : '新增客户'">
    <el-form :model="customerForm">
      <el-form-item label="姓名">
        <el-input v-model="customerForm.customerName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="customerForm.telephone" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="customerForm.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="customerForm.pid" placeholder="请输入身份证号"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCustomer">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import * as XLSX from 'xlsx';

export default {
  name: 'CustomerView',
  setup() {
    const customerData = ref([]);
    const dialogVisible = ref(false);
    const editMode = ref(false);
    const currentRow = ref(null);
    const customerForm = ref({
      customerName: '',
      telephone: '',
      address: '',
      pid: '',
    });
    const searchForm = ref({
      name: '',
      phone: '',
      address: '',
      idCard: ''
    });

    // 从后端获取客户数据
    const fetchCustomers = async () => {
      try {
        const response = await axios.get('http://localhost:8088/api/customers');
        customerData.value = response.data;
      } catch (error) {
        console.error('获取客户数据失败:', error);
      }
    };

    // 生命周期钩子：组件挂载后获取客户数据
    onMounted(() => {
      fetchCustomers();
    });

    const handleEdit = (index, row) => {
      editMode.value = true;
      currentRow.value = row;
      customerForm.value = { ...row };
      dialogVisible.value = true;
    };

    // 删除客户
    const handleDelete = (index, row) => {
      // 发送删除请求到后端接口
      axios.delete(`http://localhost:8088/api/customers/delete/${row.customerID}`)
          .then(response => {
            console.log('删除客户成功:', response.data);
            // 根据后端返回的结果更新客户数据
            customerData.value = customerData.value.filter(item => item.customerID !== row.customerID);
          })
          .catch(error => {
            console.error('删除客户失败:', error);
          });
    };

    const openDialog = () => {
      editMode.value = false;
      currentRow.value = null;
      customerForm.value = { customerName: '', telephone: '', address: '', pid: '' };
      dialogVisible.value = true;
    };

    // 提交客户信息
    const submitCustomer = () => {
      const customerInfo = {
        pid: customerForm.value.pid,
        address: customerForm.value.address,
        customerName: customerForm.value.customerName,
        telephone: customerForm.value.telephone
      };

      if (editMode.value && currentRow.value) {
        // 修改客户信息，发送请求到后端接口
        axios.put(`http://localhost:8088/api/customers/update/${currentRow.value.customerID}`, customerInfo)
            .then(response => {
              console.log('修改客户成功:', response.data);
              // 根据后端返回的结果更新客户数据
              const index = customerData.value.findIndex(item => item.customerID === currentRow.value.customerID);
              if (index !== -1) {
                customerData.value[index] = { ...customerForm.value, customerID: currentRow.value.customerID };
              }
            })
            .catch(error => {
              console.error('修改客户失败:', error);
            });
      } else {
        // 添加新客户的逻辑
        axios.post('http://localhost:8088/api/customers/insert', customerInfo)
            .then(response => {
              console.log('添加客户成功:', response.data);
              // 根据后端返回的 ID 更新客户数据
              const newId = response.data.insertedId || customerData.value.length > 0 ? Math.max(...customerData.value.map(item => item.customerID)) + 1 : 1;
              customerData.value.push({ customerID: newId, ...customerForm.value });
            })
            .catch(error => {
              console.error('添加客户失败:', error);
            });
      }
      dialogVisible.value = false;
    };

    // 下载Excel
    const downloadExcel = () => {
      // 创建一个新的工作簿
      const workbook = XLSX.utils.book_new();
      // 创建一个新的工作表
      const worksheet = XLSX.utils.json_to_sheet(customerData.value);
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, '客户信息');
      // 导出Excel文件
      XLSX.writeFile(workbook, '客户信息.xlsx');
    };

    const filteredCustomerData = computed(() => {
      const { name, phone, address, idCard } = searchForm.value;
      return customerData.value.filter(customer => {
        return (!name || customer.customerName.includes(name)) &&
            (!phone || customer.telephone.includes(phone)) &&
            (!address || customer.address.includes(address)) &&
            (!idCard || customer.pid.includes(idCard));
      });
    });

    const onSearch = () => {
      // 触发过滤，实际上由 computed 属性自动完成
    };

    return {
      customerData,
      dialogVisible,
      editMode,
      currentRow,
      customerForm,
      handleEdit,
      handleDelete,
      openDialog,
      submitCustomer,
      downloadExcel,
      searchForm,
      filteredCustomerData,
      onSearch
    };
  },
};
</script>

<style scoped>
.customer-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header-style {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
}

.main-style {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.el-table {
  height: 100%;
}

.button-group {
  display: flex;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.search-container {
  margin-bottom: 20px;
}
</style>